<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>全局组件</title>
</head>
<body>
<div id="app1">
    <h1>--------app1实例--------</h1>
    <!-- 3、使用全局组件 -->
    <mytemplate></mytemplate>
</div>
<div id="app2">
    <h1>--------app2实例--------</h1>
    <!-- 3、使用全局组件 -->
    <mytemplate></mytemplate>
</div>
<!-- 1、定义全局组件的模板 -->
<template id="mytem">
    <div>
        <!-- 模板中添加事件 -->
        <img src="../img/1.jpg" @click="fn"/>
        <h2>{{msg}}</h2>
        <ul>
            <li>飞机</li>
            <li>火车</li>
            <li>大炮</li>
        </ul>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    /* 2、使用模板，定义全局组件 */
    Vue.component('mytemplate',{
        template: '#mytem',
        data: function(){
            return {
                msg: '飞机'
            }
        },
        methods: {
            fn: function(){
                console.log("图片被点击...")
            }
        }
    });
    var app1 = new Vue({
        el: '#app1'
    });
    var app2 = new Vue({
        el: "#app2"
    });
</script>